import React, { useState } from "react";
import { Breadcrumb, Layout, theme, Col, Row } from "antd";
import { Outlet ,useNavigate} from "react-router-dom";
import MainMenuAWe from "../../components/mainMenuAWe/index";

const { Header, Content, Footer, Sider } = Layout;

const home: React.FC = () => {
  const navgetTo = useNavigate();

  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const GoLoingPage = () =>{
    navgetTo('/login');
  } 
  return (
    <Layout style={{ minHeight: "100vh" }}>
      {/* 测边页面的切花 */}
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <div className="demo-logo-vertical" />
        <MainMenuAWe></MainMenuAWe>
      </Sider>

      <Layout>
        {/* 右侧头部 */}
        <Header style={{ padding: 0, background: colorBgContainer }}>
          <Row>
            <Col span={20}>
              <Breadcrumb style={{ margin: "16px 20px" }}>
                <Breadcrumb.Item>User</Breadcrumb.Item>
                <Breadcrumb.Item>Bill</Breadcrumb.Item>
              </Breadcrumb>
            </Col>
            <Col span={4}>
              <div className="demo_logo_Header">
                <div className="GolsetStyle" onClick={GoLoingPage}>前往登录页</div>
              </div>
            </Col>
          </Row>
        </Header>
        {/* 路由数据 */}
        <Content
          style={{ margin: "16px 16px 16px 16px", backgroundColor: "#fff" }}
        >
          <Outlet />
        </Content>
        <Footer style={{ textAlign: "center", padding: 0, lineHeight: "30px" }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

export default home;
